<template>
  <dv-full-screen-container>
    <div class="container">
      <div class="top_box">
        <div class="top_item left">
          <div class="content">
            <div class="decoration_left">
              <dv-decoration-3 />
            </div>
            <p>{{ currentTime }}</p>
          </div>
        </div>
        <div class="top_item md">
          <p>深圳图书馆综合总览</p>
        </div>
        <div class="top_item right">
          <div class="content">
            <div class="weather_box">
              <div class="weather_text_wrap">
                <svg-icon
                  :icon-class="toDayWeather"
                  class-name="weather-icon"
                />
                <div>{{ temperature }}</div>
                <span class="weather_text">{{ toDayWeather }}</span>
              </div>
            </div>
            <div class="decoration_right">
              <dv-decoration-3 />
            </div>
          </div>
        </div>
      </div>

      <div class="content_box_top">
        <div class="content_box_top_one box">
          <div class="content_box_top_left">
            <span class="content_box_top_left_title size"
              >中心馆设备状态信息统计</span
            >
            <bar-Chart
              v-if="chartBarData && chartBarData.length"
              :chartData="chartBarData"
            ></bar-Chart>
          </div>
        </div>

        <div class="content_box_top_two box">
          <div class="content_box_top_center">
            <span class="content_box_top_center_title size">设备类型统计</span>
            <pine-chart :chartData="pineChartData"></pine-chart>
          </div>
        </div>

        <div class="content_box_top_three box">
          <div class="content_box_top_right">
            <span class="content_box_top_right_title size"
              >北馆设备状态信息统计</span
            >
            <bar-Chart
              v-if="chartBeiBarData && chartBeiBarData.length"
              :chartData="chartBeiBarData"
            ></bar-Chart>
          </div>
        </div>
      </div>
      <div class="content_box_bottom">
        <el-row :gutter="20">
          <el-col :span="7">
            <div class="content_box_bottom_left">
              <span class="content_box_bottom_left_title size"
                >中心馆设备状态信息统计</span
              >
              <div class="alarm_charts">
                <el-row class="alarm_charts_label">
                  <el-col :span="16" :offset="8">
                    <div class="alarm_charts_label_list">
                      <div v-for="(item, index) of timeList">
                        <div
                          :key="index"
                          :class="[
                            isDayActive == item.key ? 'isActive' : '',
                            'buttons',
                          ]"
                        >
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <div
                  style="height: 78%; width: 100%"
                  v-if="zongChartLineData && zongChartLineData.length"
                >
                  <line-chart :chartData="zongChartLineData"></line-chart>
                </div>
              </div>
              <div class="alarm">
                <div class="alarm_list">
                  <vue-seamless-scroll
                    :data="zongAlarmList"
                    :class-option="classOption"
                    class="item"
                  >
                    <div v-for="(item, index) in zongAlarmList" :key="index">
                      <el-row class="alarm_list_top">
                        <el-col :span="12">
                          <span class="devCode">{{
                            item.devName + item.devCode
                          }}</span></el-col
                        >
                        <el-col
                          :span="12"
                          style="text-align: right; overflow: hidden"
                        >
                          <span class="statusMsg">{{
                            item.statusMsg
                          }}</span></el-col
                        >
                      </el-row>
                      <el-row class="alarm_list_bottom">
                        <el-col :span="12">
                          {{ item.addrName }}
                        </el-col>

                        <el-col :span="12" style="text-align: right">
                          <span class="updateTime">{{
                            item.updateTime
                          }}</span></el-col
                        >
                      </el-row>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="10">
            <div
              class="content_box_bottom_center"
              v-if="deviceCheck && deviceCheck.devTypeName"
            >
              <div class="content_box_bottom_center_top">
                <div class="content_box_bottom_center_top_one">
                  <img
                    src="./../assets/images/content_box_bottom_center_top.png"
                    alt=""
                  />

                  <div>
                    <p>中心馆设备稳定率</p>
                    <span class="num colorwarringgradient">
                      <count-to
                        :start-val="0"
                        :end-val="Number(deviceCheck.steadyC)"
                        :duration="2000"
                        separator="."
                        autoplay
                    /></span>
                    <span class="colorwarringgradient">%</span>
                  </div>
                </div>
                <div class="content_box_bottom_center_top_two">
                  {{ deviceCheck.devTypeName }}
                </div>
                <div class="content_box_bottom_center_top_three">
                  <div>
                    <p>北馆设备稳定率</p>
                    <span class="num colorwarringgradient">
                      <count-to
                        :start-val="0"
                        :end-val="Number(deviceCheck.steadyN)"
                        :duration="2000"
                        separator="."
                        autoplay
                    /></span>
                    <span class="colorwarringgradient">%</span>
                  </div>
                  <img
                    src="./../assets/images/content_box_bottom_center_top.png"
                    alt=""
                  />
                </div>
              </div>
              <div class="content_box_bottom_center_center">
                <img
                  v-if="deviceCheck && deviceCheck.devTypePhoto"
                  :src="findImg(deviceCheck.devTypePhoto)"
                  alt=""
                />
              </div>
              <div class="content_box_bottom_center_bottom">
                <div class="content_box_bottom_center_bottom_one">
                  <img
                    src="./../assets/images/content_box_bottom_center_bottom.png"
                    alt=""
                  />

                  <div>
                    <p>中心馆设备数量</p>
                    <span class="num colorwarringgradient">
                      <count-to
                        :start-val="0"
                        :end-val="Number(deviceCheck.totalC)"
                        :duration="2000"
                        separator="."
                        autoplay
                    /></span>
                  </div>
                </div>
                <div class="devDataList">
                  <div>
                    <p>北馆设备数量</p>
                    <span class="num colorwarringgradient">
                      <count-to
                        :start-val="0"
                        :end-val="Number(deviceCheck.totalN)"
                        :duration="2000"
                        separator="."
                        autoplay
                    /></span>
                  </div>
                  <img
                    src="./../assets/images/content_box_bottom_center_top.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="content_box_bottom_right">
              <span class="content_box_bottom_right_title size"
                >北馆设备状态信息统计</span
              >
              <div class="alarm_charts">
                <el-row class="alarm_charts_label">
                  <el-col :span="16" :offset="8">
                    <div class="alarm_charts_label_list">
                      <div v-for="(item, index) of timeList">
                        <div
                          :key="index"
                          :class="[
                            isDayActive == item.key ? 'isActive' : '',
                            'buttons',
                          ]"
                        >
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <div
                  style="height: 78%; width: 100%"
                  v-if="beiChartLineData && beiChartLineData.length"
                >
                  <line-chart :chartData="beiChartLineData"></line-chart>
                </div>
              </div>
              <div class="alarm">
                <div class="alarm_list">
                  <vue-seamless-scroll
                    :data="beiAlarmList"
                    :class-option="classOption"
                    class="item"
                  >
                    <div v-for="(item, index) in beiAlarmList" :key="index">
                      <el-row class="alarm_list_top">
                        <el-col :span="12">
                          <span class="devCode">{{
                            item.devName + item.devCode
                          }}</span></el-col
                        >
                        <el-col
                          :span="12"
                          style="text-align: right; overflow: hidden"
                        >
                          <span class="statusMsg">{{
                            item.statusMsg
                          }}</span></el-col
                        >
                      </el-row>
                      <el-row class="alarm_list_bottom">
                        <el-col :span="12">
                          {{ item.addrName }}
                        </el-col>

                        <el-col :span="12" style="text-align: right">
                          <span class="updateTime">{{
                            item.updateTime
                          }}</span></el-col
                        >
                      </el-row>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import BarChart from "@c/BarChart";
import LineChart from "@c/LineChart";
import PineChart from "@c/PieChart";
import vueSeamlessScroll from "vue-seamless-scroll";
import {
  feachAllTypes,
  feachDevStatusCount,
  getAlarmDataList,
  getAlarmTimeList,
  getWeather,
} from "../api/api";
import ZZJH from "./../assets/images/ZZJH.png";

export default {
  data() {
    return {
      temperature: "",
      toDayWeather: "",
      currentTime: "",
      FloorInterval: null,
      classOption: {
        singleHeight: 30,
      },
      beiAlarmList: [], //报警日志列表
      beiChartLineData: [],
      zongAlarmList: [], //报警日志列表
      zongChartLineData: [],
      chartBarData: [],
      chartBeiBarData: [],
      pineChartData: [],
      timeList: [
        { name: "日", key: "day" },
        { name: "周", key: "week" },
        { name: "月", key: "month" },
      ],
      isDayActive: "week",

      currentTImeIndex: 0,
      deviceCheck: null,
      itemIndex: 0,
      defaultDevImg: ZZJH,

      devDataList: [],
      zongSteady: 0, //中心馆稳定率
    };
  },
  props: {},
  components: { BarChart, vueSeamlessScroll, LineChart, PineChart },
  computed: {},
  watch: {},
  methods: {
    async feachDevStatusCounts() {
      //上面 左侧右侧的图表数据

      try {
        const data = await feachDevStatusCount(_Glob.libBeiCode); //北馆
        const res = await feachDevStatusCount(_Glob.libCode); //中心馆
        this.chartBeiBarData = data.data.data;
        this.chartBarData = res.data.data;
      } catch (error) {
        console.log(error);
      }
    },

    init() {
      this.dateHandle();
      this.getWeather();
      this.getAlarmDataLists();
      this.getAlarmTimeLists();
      this.feachDevStatusCounts();
      this.feachAllTypess();
      try {
        this.time = setInterval(() => {
          //时间
          this.dateHandle();
        }, _Glob.waitOneSeconds);

        this.weatherInterval = setInterval(() => {
          //时间
          this.getWeather();
        }, _Glob.waitWeather);

        this.FloorInterval = setInterval(() => {
          //6秒一轮询
          // 轮询切换按钮文本
          this.currentTImeIndex++;

          if (this.currentTImeIndex > 2) {
            this.currentTImeIndex = 0;
          }
          this.getAlarmDataLists();
          this.feachDevStatusCounts();
          this.getAlarmTimeLists(this.timeList[this.currentTImeIndex].key);
        }, _Glob.waitOneMinutes); // 6秒轮询一次
        this.$nextTick(() => {
          this.pollItems();
        });
      } catch (error) {
        console.log(error);
      }
    },
    async feachAllTypess() {
      try {
        const data = await feachAllTypes();

        let arr = data.data.data;
        this.devDataList = arr;
        let list = [];
        console.log(arr, 369369);
        if (arr && arr.length) {
          list = arr.map((obj) => {
            return {
              value: obj.total,
              name: obj.devTypeName,
            };
          });
          console.log(list, 389389);

          this.pineChartData = list;
        }
      } catch (error) {
        throw error;
      }
    },
    dateHandle() {
      const d = new Date();
      const year = d.getFullYear();
      const month =
        d.getMonth() > 8 ? d.getMonth() + 1 : "0" + (d.getMonth() + 1);
      const date = d.getDate() > 9 ? d.getDate() : "0" + d.getDate();
      const hours = d.getHours() > 9 ? d.getHours() : "0" + d.getHours();
      const minutes =
        d.getMinutes() > 9 ? d.getMinutes() : "0" + d.getMinutes();
      const weekDays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const today = new Date().getDay();
      const currentWeekDay = weekDays[today];
      console.log(
        `${year}年${month}月${date} ${hours}:${minutes} ${currentWeekDay}`
      );
      this.currentTime = `${year}年${month}月${date} ${hours}:${minutes} ${currentWeekDay}`;
    },
    async getWeather() {
      //找天气
      try {
        const { data } = await getWeather(); //查询天气
        // console.log(data.lives, 354354);
        this.temperature = data.lives[0].temperature + "℃";
        this.toDayWeather = data.lives[0].weather;
      } catch (error) {
        // console.log(error, 358358);
      }
    },

    async getAlarmDataLists() {
      //报警日志 下方 左侧右侧滚动的

      try {
        const data = await getAlarmDataList(_Glob.libBeiCode); //北馆
        this.beiAlarmList = data.data.data?.length
          ? data.data.data.slice(0, 50)
          : [];
        const res = await getAlarmDataList(_Glob.libCode); //中心馆
        this.zongAlarmList = res.data.data?.length
          ? res.data.data.slice(0, 50)
          : [];
      } catch (error) {}
    },
    async getAlarmTimeLists(i = "week") {
      //查报警日志上方的数据 趋势图
      this.isDayActive = i;
      try {
        const data = await getAlarmTimeList(_Glob.libBeiCode, i); //北馆

        // 使用 sort() 方法对数组进行排序，直接传入比较函数
        this.beiChartLineData = data.data.data?.length
          ? data.data.data.sort((a, b) => {
              const timeA = new Date(a.time);
              const timeB = new Date(b.time);
              return timeA - timeB; // 降序排序
            })
          : [];
        const res = await getAlarmTimeList(_Glob.libCode, i); //总馆

        console.log(data, "427打印数据");
        // 使用 sort() 方法对数组进行排序，直接传入比较函数
        this.zongChartLineData = res.data.data?.length
          ? data.data.data.sort((a, b) => {
              const timeA = new Date(a.time);
              const timeB = new Date(b.time);
              return timeA - timeB; // 降序排序
            })
          : [];
      } catch (error) {
        console.log(error, 437);
      }
    },

    pollItems() {
      // 获取设备状态
      this.deviceCheck = this.devDataList[this.itemIndex];
      console.log(this.devDataList[this.itemIndex], 539539539);
      // 增加当前索引
      this.itemIndex++;

      // 如果当前索引大于等于数组长度，重置索引为0，重新轮询
      if (this.itemIndex >= this.devDataList.length) {
        this.itemIndex = 0;
      }
      // 延迟3秒后再次轮询
      setTimeout(() => {
        this.pollItems();
      }, _Glob.waitSixSeconds);
    },
    findImg(i) {
      console.log(i, 536536536);
      //img路径
      try {
        return _Glob.url + "/" + i;
      } catch (error) {
        return defaultDevImg;
      }
    },
    handleImageError(i) {
      i.devTypePhoto = defaultDevImg;
    },
  },
  created() {},
  mounted() {
    this.init();
  },
  beforeDestroy() {
    // 清除所有计时器
    clearInterval(this.FloorInterval);
    clearInterval(this.time);
    clearInterval(this.weatherInterval);
  },
  updated() {},
  destroyed() {},
  filters: {},
};
</script>

<style scoped lang='less'>
.top_box {
  height: 8%;
  display: flex;

  .top_item:nth-child(1) {
    width: 28%;
    background-image: url("../assets/images/top_lt.png");
  }

  .top_item:nth-child(2) {
    width: 44%;
    // background-image: url("../assets/images/top_md.png");
  }

  .top_item:nth-child(3) {
    width: 28%;
    background-image: url("../assets/images/top_rt.png");
  }

  .top_item {
    background-size: 100% 100%;
  }

  .left,
  .right {
    .content {
      display: flex;
      align-items: center;
      height: 40%;
    }

    p {
      width: 70%;
      font-size: 20px;
      color: #ccf8ff;
      text-align: center;
      font-family: DingTalk;
    }
  }

  .weather_box {
    display: flex;
    // font-size: 40px;
    color: #ccf8ff;
    font-weight: bold;
    text-shadow: 0 0 20px #ccf8ff;
    line-height: 70px;
    width: 70%;

    .weather_text_wrap {
      display: flex;
      align-items: center;
      font-size: 20px;
    }

    .weather_text {
      margin-left: 20px;
    }

    .weather-icon {
      font-size: 40px;
      margin-right: 20px;
    }
  }

  .decoration_left {
    box-sizing: border-box;
    width: 30%;
    height: 30px;
    padding-left: 30px;
  }

  .decoration_right {
    box-sizing: border-box;
    width: 30%;
    height: 30px;
    padding-right: 30px;
  }

  .md {
    p {
      font-size: 40px;
      letter-spacing: 12px;
      text-align: center;
      font-family: YouSheBiaoTiHei;

      color: transparent;
      line-height: 28px;
      font-style: normal;
      background: linear-gradient(to bottom, #ffffff, #00ccff);
      /* 将背景设置为文字填充 */
      -webkit-background-clip: text;
      background-clip: text;
      // background: linear-gradient(90deg, #FFFFFF 0%, #00CCFF 100%);
    }
  }
}

.content_box_top {
  height: 39%;
  width: 100%;
  margin-bottom: 1%;
  display: flex;
  justify-content: space-between;
}
.content_box_top_one {
  width: 37%;
}
.content_box_top_two {
  width: 21%;
}
.content_box_top_three {
  width: 37%;
}
.box {
  height: 100%;
}
.content_box_bottom {
  height: 53%;
  width: 100%;
}

.content_box_top_left {
  width: 100%;
  height: 100%;
  background: url("./../assets/images/content_box_top_left.png") no-repeat top;
  background-size: 100%;
  position: relative;
}
.content_box_top_left_title {
  position: absolute;
  top: 3%;
  left: 4%;
}
.content_box_top_center {
  width: 100%;
  height: 100%;
  background: url("./../assets/images/content_box_top_center.png") no-repeat top;
  background-size: 100%;
  position: relative;
  padding: 5%;
  box-sizing: border-box;
}
.content_box_top_center_title {
  position: absolute;
  top: 4%;
  left: 39%;
}
.content_box_top_right {
  width: 100%;
  height: 100%;
  background: url("./../assets/images/content_box_top_right.png") no-repeat top;
  background-size: 100%;
  position: relative;
}
.content_box_top_right_title {
  position: absolute;
  top: 4%;
  right: 4%;
}

.content_box_bottom_left {
  width: 100%;
  height: 100%;
  background: url("./../assets/images/content_box_bottom_left.png") no-repeat
    top;
  background-size: 100%;
  margin-bottom: 3%;
  position: relative;
  padding: 5%;
  box-sizing: border-box;
}
.content_box_bottom_center {
  width: 100%;
  height: 100%;
  margin-bottom: 3%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 5%;
  box-sizing: border-box;
}
.content_box_bottom_center_top {
  height: 10%;
  width: 100%;
  display: flex;
  justify-content: space-between;

  p {
    // font-size: 18px;
    font-family: "DingTalk";
    color: #cbcbcb;
    text-align: right;
    font-style: normal;
    font-weight: 600;
  }
  img {
    width: 50px;
    height: 50px;
  }
}
.content_box_bottom_center_top_one {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
}
.content_box_bottom_center_top_two {
  font-family: AlibabaPuHuiTiH;
  font-size: 24px;
  color: #5feaff;
  letter-spacing: 1px;
  font-style: normal;
  font-weight: 600;
}
.content_box_bottom_center_top_three {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  text-align: right;
}
.content_box_bottom_center_center {
  height: 80%;
  width: 100%;
  background: url("./../assets/images/content_box_bottom_center.png") no-repeat
    top;
  background-size: 100%;
  text-align: center;
  padding-top: 4%;
  img {
    width: 126px;
    height: 271.34px;
  }
}
.content_box_bottom_center_bottom {
  height: 10%;
  width: 100%;
  display: flex;
  justify-content: space-between;

  p {
    // font-size: 18px;
    font-family: "DingTalk";
    color: #cbcbcb;
    text-align: right;
    font-style: normal;
    font-weight: 600;
  }
  img {
    width: 50px;
    height: 50px;
  }
}
.content_box_bottom_center_bottom_one {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
}
.devDataList {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  text-align: right;
}
.content_box_bottom_left_title {
  position: absolute;
  top: 3%;
  left: 4%;
}

.content_box_bottom_right {
  width: 100%;
  height: 100%;
  background: url("./../assets/images/content_box_bottom_right.png") no-repeat
    top;
  background-size: 100%;
  margin-bottom: 3%;
  position: relative;
  padding: 5%;
  box-sizing: border-box;
}

.content_box_bottom_right_title {
  position: absolute;
  top: 3%;
  right: 4%;
}

.content_left_bottom_footer_item {
  width: 94%;
  height: 40px;
  background-size: 100%;
  text-indent: 60px;
}

.content_right {
  // width: 60%;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.size {
  font-size: 18px;
  font-weight: 600;
  font-family: "DingTalk";
  color: #7ffffd;
  letter-spacing: 1px;
  font-style: normal;
}

.alarm_list_name {
  position: absolute;
  left: 38%;
  top: 2%;
}

.alarm {
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.alarm_list {
  width: 100%;
  height: 100%;

  .item {
    color: #fff;
    font-size: 14px;
    overflow: hidden;
    color: #ffffff;
    line-height: 14px;
    font-style: normal;
    // height: calc(100% - 40px);

    .alarm_list_top {
      margin-bottom: 10px;
      font-family: "DingTalk";
      .devCode {
        font-size: 16px;
      }
    }

    .alarm_list_bottom {
      margin-bottom: 10px;

      font-family: AlibabaPuHuiTiM;
      font-size: 12px;
      color: #cecece;
      // line-height: 10px;
      font-style: normal;
    }
  }
}

.alarm_charts {
  height: 50%;
  width: 100%;
  margin-bottom: 25px;
  position: relative;
  padding-top: 10%;
  box-sizing: border-box;
  .alarm_charts_label {
    margin-bottom: 10px;
    margin-bottom: 10px;
    position: absolute;
    right: 10%;
    top: 12%;
    .alarm_charts_label_list {
      display: flex;
    }
  }
}

.buttons {
  width: 36px;
  height: 18px;
  line-height: 18px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 192, 255, 0) 0%, #00c0ff 100%);
  border-radius: 4px;
  border: 2px solid;
  border-image: linear-gradient(
      180deg,
      rgba(0, 192, 255, 0),
      rgba(0, 192, 255, 1)
    )
    2 2;
  margin-right: 10px;
  text-align: center;
  font-family: YouSheBiaoTiHei;
  font-size: 12px;
  box-sizing: border-box;
  opacity: 0.3;
}
.isActive {
  opacity: 1;
}

.marginbotm-8px {
  margin-bottom: 8px;
}
.letter1px {
  letter-spacing: 1px;
}
.devStatusIcon {
  width: 42px;
  height: 42px;
  margin-right: 5px;
}
.num {
  font-family: "UniDreamLED";
  font-size: 30px;
}
.devStatusTitle {
  font-size: 18px;
}

.colorwarringgradient {
  font-style: normal;
  color: transparent;
  background: linear-gradient(to bottom, #eeeeee, #13cfff);
  /* 将背景设置为文字填充 */
  -webkit-background-clip: text;
  background-clip: text;
}

.offlineColor {
  color: #cbcbcb;
}
.warnColor {
  color: #ffa61a;
}
.errorColor {
  color: #ec436b;
}
</style>
